<blockquote class="layui-elem-quote">添加商品</blockquote>

<!--表单-->



<form class="layui-form">

    <div class="layui-form-item">
        <label class="layui-form-label">商品父分类</label>
        <div class="layui-input-inline">
            <select name="parentId" lay-filter="parentId"></select>
        </div>

        <label class="layui-form-label">商品子分类</label>
        <div class="layui-input-inline">
            <select name="categoryId"></select>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="name" required placeholder="请输入商品名">
        </div>

        <label class="layui-form-label">商品内容</label>
        <div class="layui-input-inline">
            <input class="layui-input" type="text" name="content" required placeholder="请输入商品内容">
        </div>
    </div>


        <div class="layui-form-item">
            <label class="layui-form-label">售价</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="number" name="price" required placeholder="请输入商品价格" step="0.01">
            </div>

            <label class="layui-form-label">标价</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="number" name="markPrice" required placeholder="标价" step="0.01">
            </div>
        </div>


            <div class="layui-form-item">
                <label class="layui-form-label">商品颜色</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="color" required placeholder="请输入商品颜色">
                </div>

                <label class="layui-form-label">商品版本</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="version" required placeholder="请输入商品版本">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">商品库存</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="number" name="count" required placeholder="请输入商品数量">
                </div>

                <label class="layui-form-label">主页推荐</label>
                <div class="layui-input-inline">
                    <input type="radio" name="recom" value="0" title="不推荐" checked>
                    <input type="radio" name="recom" value="1" title="推荐">
                </div>
            </div>

    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-inline">
            <textarea name="dscp" placeholder="请输入商品的描述" class="layui-textarea" required></textarea>
        </div>
    </div>



    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">多图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" lay-submit lay-filter="goods-add"
                    class="layui-btn">提交</button>
        </div>
    </div>

</form>

<script>
    layui.use(['form','upload','element'],function (){
        var form = layui.form,
            upload = layui.upload,
            element = layui.element,
            $ = layui.$;

        //使用ajax来获取商品分类的列表

        var getParentCategory = function (){

            $.ajax({
                url: '/api/category',
                data:{parentId: 0},
                type:'get',
                dataType:'json',
                success:function(result){
                    var html = '<option value="">请选择商品父分类</option>'
                    //遍历查询到的数据
                    $.each(result.data,function (index,item){
                        html += '<option value="'+item.id+'">'+item.name+'</option>';

                    });
                    $('select[name="parentId"]').html(html);

                    //渲染一次表单
                    form.render();
                },
                error:function (){
                    layer.msg('请求失败');
                }
            });
            //渲染表单
            form.render();
        }
        getParentCategory();

        //动作 父分类选择的动作
        form.on('select(parentId)',function (data){
           var parentId = data.value;

           //二级联动
            if (parentId){
                //查询当前父分类下的子分类
                $.ajax({
                    url:'/api/category',
                    data:{parentId:parentId},
                    type:'get',
                    dataType:'json',
                    success:function (result){
                        var html = '<option value="">请选择商品子分类</option>'
                        //遍历查询到的数据
                        $.each(result.data,function (index,item){
                            html += '<option value="'+item.id+'">'+item.name+'</option>';

                        });
                        $('select[name="categoryId"]').html(html);

                        //渲染一次表单
                        form.render();
                    } ,
                    error:function (){
                        layer.msg("请求失败");
                    }
                });
            }else {
                $('select[name="categoryId"]').html('');
                form.render();
            }
        });

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/api/upload' //此处配置你自己的上传接口即可
            ,multiple: true
            ,before: function(obj){

            }
            ,done: function(res){
                //上传完毕
                //读取服务器当中的图片
                $('#demo2').append('\
                <img style="width: 92px;height: 92px; cursor: pointer"\
                src="/upload/'+res.data+'"\
                data-name="'+res.data+'">\
                ');
            }
        });

        //图片删除操作
        $('#demo2').on('click','img',function (){
           $(this).remove();
        });



        //表单提交
        form.on('submit(goods-add)',function (data){
            //准备好图片参数
            var pics =[];
            $('#demo2 img').each(function (){
           var url = $(this).attr('data-name');

           pics.push({url: url});
            });

            data.field.pics = pics;

            //ajax将表单的数据提交到服务器
            //添加分类的url   /api/goods  post请求
            $.ajax({
                url:'/api/goods',
                data:JSON.stringify(data.field),
                contentType:'application/json; charset=utg-8',
                type: 'post',
                dataType: 'json',
                success: function (result){
                    if (result.code ==0){
                        layer.msg("添加成功");
                        //跳转到列表页面
                        openUrl('goods/index.html');
                    }else {
                        layer.msg(result.msg);
                    }
                },
                error: function (){
                    layer.msg("请求失败");
                }
            });
            //阻止表单的自动提交
            return false;
        });
    });

</script>